<!-- 挖矿linux -->
<template>

  <div class="pag" >
    <div class="banner">
      <div class="b-title">
        <img :src="imgs[path]" alt="">
        <div>
          <p>{{ names[path] }}挖矿数据看板</p>
          <div v-if="status == 0" class="tag warning">未开启</div>
          <div v-if="status == 1" class="tag success">运行中</div>
          <div v-if="status == 2" class="tag warning">审核中</div>
          <div v-if="status == 3" class="tag danger">已停止</div>
        </div>
      </div>
    </div>
    <div class="data-board">
      <div class="tabs">
        <div class="tabs-head">
          <div class="tab" :class="{choose: chooseTab == 1}" @click="chooseTabHandler(1)">日报表</div>
          <div class="tab" :class="{choose: chooseTab == 2}" @click="chooseTabHandler(2)">时报表</div>
        </div>
        <div class="tabs-body">
          <div class="tab-panel" :class="{choose: chooseTab == 1}">
            <chart-line :value="chartData"></chart-line>
          </div>
          <div class="tab-panel" :class="{choose: chooseTab == 2}">
            <chart-line :value="chartTimeData"></chart-line>
          </div>
        </div>
      </div>
    </div>
    <div class="table-list" v-show="chooseTab == 1">
      <div class="table-head">
        <div class="table-cell">时间</div>
        <div class="table-cell">流量</div>
        <div class="table-cell">当日<br>获得的CVNT</div>
        <div class="table-cell">当日<br>在线时长</div>
        <div class="table-cell">状态</div>
      </div>
      <div class="table-body">
        <div class="table-row" v-for="item in tableList">
          <div class="table-cell">{{ item.time | timeTo}}</div>
          <div class="table-cell">{{ item.totalFormat}}</div>
          <div class="table-cell">{{ item.cvnt || 0}}</div>
          <div class="table-cell" :class="{ok: item.onlineTime && item.onlineTime > minOnlineTime}">{{ item.onlineTime || 0}}h</div>
          <div class="table-cell" :class="{ok: item.cvnt && item.status != 2, no: item.cvnt && item.status == 2}">
            {{ item.cvnt ? (item.status == 2 ? '待发放' : '已发放') : '--' }}
          </div>
        </div>
      </div>
    </div>
    <div class="table-list" v-show="chooseTab == 2">
      <div class="table-head">
        <div class="table-cell" style="width: 50%">时间</div>
        <div class="table-cell" style="width: 50%">贡献量</div>
      </div>
      <div class="table-body">
        <div class="table-row" v-for="item in tableList2">
          <div class="table-cell" style="width: 50%">{{ item.time }}</div>
          <div class="table-cell" style="width: 50%">{{ item.totalFormat}}</div>
        </div>
      </div>
    </div>

  </div>

</template>

<script>
    import chartLine from 'cpnts/line'
    import {kbTo, dateToTimestamp} from 'common/js/utl'
    import {deviceChart} from 'src/api/index'


    // let dt = []
    // for(let i=0;i<20;i++){
    //   dt.push({
    //     time: '2019/08/07',
    //     total: 2001,
    //     cvnt: 43
    //   })
    // }
    export default {
        components: {
            chartLine
        },
        data () {
            return {
                names: {
                    router: '路由器',
                    linux: 'linux',
                    pc: '客户端'
                },
                name: '',
                status: 1,
                chooseTab: 1,
                nodeId: 3570,
                tableList:[],
                tableList2: [],
                path: 'pc',
                sources: {
                    router: 3,
                    linux: 2,
                    pc: 1
                },
                onlineTimes: {
                  router: 20,
                  linux: 20,
                  pc: 10
                },
                imgs: {
                    router: require('assets/images/miningboard/router.png'),
                    pc: require('assets/images/miningboard/pc.png'),
                    linux: require('assets/images/miningboard/linux.png')
                }
            }
        },
        filters: {
            unitTo(val){
                return kbTo(val)
            },
            timeTo(val){
                if(val.length != 10){
                    return val
                }
                return val.substr(5, 6).replace('-', '/')
            }
        },
        mounted(){
            // setTimeout(()=>{
            //   this.tableList = dt
            // }, 1000)
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {
                Object.assign(vm, to.query)
                vm.chooseTab = 1
                vm.tableList = []
                vm.tableList2 = []
                vm.getDeviceInfo()
            })
        },
        computed: {
            minOnlineTime(){
              return this.onlineTimes[this.path] - 1
            },
            chartData(){
                let {tableList, chooseTab} = this
                let name= '流量'
                const dw = '/h'
                let data = tableList
                let xAxis = {
                    type: 'category',
                    boundaryGap: false,
                    splitLine: {
                        show: false
                    },
                    data: [],
                    axisLabel: {
                        formatter(value, index) {
                            if(value.length == 10){
                                return value.substr(5, 6).replace('-', '/')
                            }else{
                                return value
                            }
                        }
                    }
                }
                let series = [{
                    type: 'line',
                    data: []
                }]
                for(let item, i=data.length;i--;){
                    item = data[i]
                    xAxis.data.push(item['time'])
                    series[0].data.push({
                        value: item['total'],
                        valueUnit: dw,
                        name,
                    })
                }
                // for (let item of data){
                //   // xAxis.data.push(item['time'].replace(':00', ''))
                //   xAxis.data.push(item['time'])
                //   series[0].data.push({
                //     value: item['total'],
                //     valueUnit: dw,
                //     name,
                //   })
                // }
                return {
                    xAxis,
                    series
                }
            },
            chartTimeData(){
                let {tableList2, chooseTab} = this
                let name= '贡献量'
                let data = tableList2
                let xAxis = {
                    type: 'category',
                    boundaryGap: false,
                    splitLine: {
                        show: false
                    },
                    data: [],
                    axisLabel: {
                        formatter(value, index) {
                            if(value.length > 15 ){
                                return value.substr(10, 6)
                            }else{
                                return value
                            }
                        }
                    }
                }
                let series = [{
                    type: 'line',
                    data: []
                }]
                for(let item, i=data.length;i--;){
                    item = data[i]
                    xAxis.data.push(item['time'])
                    series[0].data.push({
                        value: item['total'],
                        name,
                    })
                }
                // for (let item of data){
                //   // xAxis.data.push(item['time'].replace(':00', ''))
                //   xAxis.data.push(item['time'])
                //   series[0].data.push({
                //     value: item['total'],
                //     name,
                //   })
                // }

                return {
                    xAxis,
                    series
                }
            }
        },
        methods: {
            chooseTabHandler(index){
                this.chooseTab = index
                this.getDeviceInfo()
            },
            getDeviceInfo(){
                let {nodeId, chooseTab} = this
                let {uid, token} = this
                let start,end, show_type
                let date = new Date()
                end = dateToTimestamp(date)

                show_type = chooseTab == 1 ? 2 : 1
                if(show_type == 1){
                    date.setHours(0)
                    date.setMinutes(0)
                    date.setSeconds(0)
                    start = dateToTimestamp(date)
                }else{
                    date.setDate(date.getDate() - 30)
                    start = dateToTimestamp(date)
                }
                deviceChart({
                    uid,
                    token: appToken,
                    node_id: nodeId,
                    show_type,
                    source: this.sources[this.path]
                    //start,
                    //end
                })
                    .then(({data})=>{
                        let dt = data
                        if(!dt){
                            return
                        }
                        let item
                        if(show_type == 1){
                            for(let i=0,l=dt.length;i<l;i++){
                                item = dt[i]
                                if(item.time && item.time.length == 19){
                                    item.time = item.time.substr(11, 5)
                                }
                            }
                        }

                        // dt.sort((a, b)=>{
                        //   if(a.time > b.time){
                        //     return -1
                        //   }
                        //   if(a.time < b.time){
                        //     return 1
                        //   }
                        //   return  0
                        // })

                        if(chooseTab == 1 ){
                            this.tableList = dt
                        }else{
                            this.tableList2 = dt
                        }

                    })
            }

        }
    }
</script>

<style lang="scss" scoped>
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  .pag {

  }

  .banner {
    height:358px;
    background:linear-gradient(210deg,rgba(171,133,254,1) 0%,rgba(121,94,255,1) 100%);
  }

  .b-title {
    > div {
      > div {
        width:96px;
        height:40px;
        border:none;
        border-radius: 4px;
      }
    }
  }

   .data-board {
     width:690px;
     height:436px;
     background:rgba(255,255,255,1);
     box-shadow:0px 1px 2px 0px rgba(10,29,87,0.2);
     border-radius:14px;
     margin: -136px 30px 24px 30px;
   }


  .tabs {
    /*margin: 30px;*/
    height:436px;
    //background:rgba(30,34,59,1);
    border-radius:8px;
  }

  .tabs-head {
    height: 80px;
    display: flex;
    justify-content: space-around;
    border-bottom: 2px solid #F5F5F5;
    .tab {
      width: 150px;
      height: 100%;
      line-height: 76px;
      text-align: center;
      font-size:30px;
      color:#71768C;
      position: relative;
      &.choose {
        color: #45E6FD;
        &::after {
          content: '';
          width:100%;
          height:4px;
          background:rgba(69,230,253,1);
          position: absolute;
          bottom: 0;
          left: 0;
        }
      }
    }
  }

  .tabs-body {
    height: 354px;
    overflow: hidden;
    position: relative;
  }

  .tab-panel {
    width: 100%;
    height: 100%;
    /*display: none;*/
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    &.choose {
      opacity: 1;
      z-index: 10;
    }
  }


  .table-list {
    background:#fff;
    border-radius:8px;
    margin: 30px;
    .table-cell {
      text-align: center;
      &:nth-of-type(1){
        width: 13%;
        /*min-width: 155px;*/
        white-space: nowrap;
      }
      &:nth-of-type(2){
        width: 28%;
      }
      &:nth-of-type(3){
        width: 17%;
        min-width: 150px;
        white-space: nowrap;
      }
      &:nth-of-type(4){
        width: 17%;
        white-space: nowrap;
      }
      &:nth-of-type(5){
        width: 15%;
        white-space: nowrap;
      }
    }
    .table-body {
      .table-cell {
        &:nth-of-type(4){

        }
      }
    }
  }


  .table-head {
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size:26px;
    color:#71768C;
    /*padding: 0 38px;*/
    background:#fff;
    position: sticky;
    position: -webkit-sticky;
    top: -1px;
  }


  .table-row {
    height: 85px;
    border-top: 1px solid #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size:28px;
    color:#202C5B;
    /*padding: 0 38px;*/
  }





</style>
















